<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二级联动测试</title>
		<style type="text/css">
			select {
				font-size: 26px;
				padding: 5px 14px;
			}
		</style>
		<script type="text/javascript">
			function getCountryName() {
				var select_country = document.getElementById("country");
				alert(select_country.value);
			}
		</script>
		<script type="text/javascript">
			var data = {
				"北京市" : ["朝阳区", "新城区", "海淀区"],
				"湖南省" : ["长沙市", "常德市", "娄底市"],
				"广东省" : ["广州市", "中山市", "深圳市"],
			}
			function getCityList() {
				//1、获取选中的省份
				var selectedProvinceName = document.getElementById("province").value;
				//2、获取省份包含的城市(创建js对象 -- 省份 + 城市)
				var cities = data[selectedProvinceName];
				//3、把城市放到下拉框标签(放之前进行重置)
				var select_city = document.getElementById("city");
				select_city.innerHTML = '<option value="none">--请选择城市--</option>';
				if (cities != undefined && cities != null) {
					for (var i = 0; i < cities.length; i++) {
						var newOption = document.createElement("option");
						newOption.innerHTML = cities[i];
						select_city.appendChild(newOption);
					}
				}
			}
		</script>
	</head>
	<body>
		<select id="country" name="country" onchange="getCountryName()">
			<option value="none">--请选择国家--</option>
			<option value ="中国">中国</option>
			<option value ="美国">美国</option>
			<option value ="日本">日本</option>
		</select>
		<br />
		<br />
		<hr />
		<br />
		<select id="province" name="province" onchange="getCityList()">
			<option value="none">--请选择省份--</option>
			<option value ="北京市">北京市</option>
			<option value ="湖南省">湖南省</option>
			<option value ="广东省">广东省</option>
		</select>
		<select id="city" name="city">
			<option value="none">--请选择城市--</option>
		</select>
	</body>
</html>
